<template>
	<view class="container">
		<view :style="{ height: topHeight + 'px' }">
			<uv-tabs :list="tabList" :current="cur" @click="tap" />
		</view>

		<view class="contents">
			<view class="left">
				<scroll-view scroll-y="true" :style="{ height: scrolHeight + 'px' }" class="scroll-Y">
					<view
						class="scroll-view-item"
						:style="{ background: curCId == item.id ? 'white' : '#F1F8FA' }"
						v-for="(item, index) in state.goodsList"
						:key="item.id"
						@click="selTab(index)"
					>
						<view class="inner">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="right" :style="{ height: scrolHeight + 'px' }">
				<scroll-view scroll-y="true" :style="{ height: scrolHeight + 'px' }" class="scroll-Y">
					<template v-for="category in state.goodsList" :key="category.id">
						<view class="out-card" v-for="(item, index) in category.goods_list" :key="item.id" v-show="item.category_id == curCId && (cur == 0 || cur == item.status)">
							<view>
								<view class="card">
									<image class="icon" :src="item.img" mode="aspectFill" />
									<view class="top">
										<view class="title">{{ item.title }}</view>
										<view class="price">￥{{ (item.price / 100).toFixed(2) }}</view>
									</view>
								</view>
								<view class="bottom">
									<view class="btn" @click="detail(item)">编辑</view>
									<view class="btn edit" @click.stop="del(item, index)">删除</view>
									<view class="btn edit" @click.stop="down(item)" v-show="item.status == 1">下架</view>
									<view class="btn edit" @click.stop="up(item)" v-show="item.status != 1">上架</view>
								</view>
							</view>
						</view>
					</template>

					<view class="space" />
				</scroll-view>
			</view>
		</view>
		<view class="ops" :style="{ height: opsHeight + 'px' }">
			<view class="btn category" @click="nav('/pages/merchant/category_op')">分类管理</view>
			<view class="btn add" @click="nav('/pages/merchant/edit')">添加商品</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { Goods } from '../../vendor/order_food/goods';
import getGoods from '../../vendor/order_food/goods';
import { setGoods,setBaseHeight } from '../../store/global';
import { state } from '../../store/shop';

const { getList: getGoodsList, updateStatus, del: delGoods } = getGoods();
let curCId = ref(0);

getGoodsList(() => {
	if (state.goodsList.length) {
		curCId.value = state.goodsList[0].id;

		console.log(state.goodsList.length);
	}
});

const cur = ref(0);
const tap = (item: any) => {
	cur.value = item.index;
};
const scrolHeight = ref(0);
// const selLeftTabIndex = ref(0);
const selTab = (index: number) => {
	// selLeftTabIndex.value = index;
	curCId.value = state.goodsList[index].id;
};
const tabList = [
	{
		name: '全部'
	},
	{
		name: '已上架'
	},
	{
		name: '已下架'
	}
];

const topHeight = ref(50);
const opsHeight = ref(80);


const calHeight = () => {
	setBaseHeight((height: number) => {
		scrolHeight.value = height - opsHeight.value;
	});
};

calHeight()


const nav = (url: string) => {
	uni.navigateTo({
		url
	});
};

// 删除
const del = (item: Goods, index: number) => {
	uni.showModal({
		content:"确定删除吗?",
		confirm: () => {
			updateStatus(curCId.value, item.id, 3, () => {
				// 软删除
				toasting('删除成功');
				const o = state.goodsList.find((obj)=>obj.id == curCId.value)
				const i = o.goods_list.findIndex((obj)=>obj.id == item.id )
				
				o.goods_list.splice(i,1)
			});
		}
	})
};

// 下架
const down = (item: Goods) => {
	updateStatus(curCId.value, item.id, 2, () => {
		toasting('已下架');
		item.status = 2;
	});
};

// 上架
const up = (item: Goods) => {
	updateStatus(curCId.value, item.id, 1, () => {
		toasting('已上架');
		item.status = 1;
	});
};

const detail = (item: Goods) => {
	setGoods(item);
	uni.navigateTo({
		url: '/pages/merchant/edit'
	});
};

const toasting = (title) => {
	uni.showToast({
		title,
		icon: 'none'
	});
};

// const getImg = (url: string) => {
// 	return env.clound_storage_url + url;
// };
</script>

<style scoped lang="scss">
.scroll-view-item {
	height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	// line-height: 80px;
}
.ops {
	background: white;
	display: flex;
	padding-top: 10px;
	.btn {
		text-align: center;
		color: white;
		line-height: 50px;
		height: 50px;
		width: 45%;
		margin: 0 auto;
		border-radius: $uni-border-radius-lg;
	}
	.category {
		background: #e8e460;
	}
	.add {
		background: #a5d63f;
	}
}

.container {
	overflow-y: hidden;
	// background: #f8f8f8;
}

.contents {
	display: flex;
	.left {
		width: 25%;
		text-align: center;
		.inner {
			padding: 0 10px;
		}
	}
	.right {
		background: white;
		width: 75%;
		padding: 20px;
	}
}

.out-card {
	margin-bottom: 20px;
	.card {
		display: flex;
		.title {
			font-weight: 600;
			font-size: 18px;
			padding-top: 3px;
		}
		.price {
			padding-bottom: 3px;
			.amount {
				font-size: 20px;
				display: inline;
			}
		}
		.top {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.price {
				color: #f00;
			}
		}
		.icon {
			width: 80px;
			height: 80px;
			margin-right: 10px;
			border-radius: $uni-border-radius-lg;
		}
	}
	.bottom {
		display: flex;
		margin-top: 10px;
		.btn {
			border: 1px solid #bfbfbf;
			border-radius: 20px;
			width: 100px;
			text-align: center;
			line-height: 30px;
		}
		.edit {
			margin-left: 7px;
		}
	}
}
.space {
	height: 10px;
}
</style>
